<template>
  <div>
    <div id="top">
      <div class="header w">
        <div class="logo">
            <img src="../assets/logo.png" alt="logo">
        </div>
        <div class="topNav">
          <div class="projectName">
              <span class="projectName1">机关教辅单位服务作风评价</span>
          </div>
          <div class="navBox">
            <dialog-bar
              v-model="sendVal"
              type="confirm"
              title="提示"
              :content="hintMessage"
              @danger="clickDanger()"
              v-on:cancel="clickCancel()"
              @confirm="clickConfirm()"
              confirmText="查看"
            ></dialog-bar>
            <el-menu
              :default-active= activeIndex
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
              background-color="#e0e0e0"
              text-color="#434343"
            >
              <el-menu-item @click="backHome" index="1">首页</el-menu-item>
              <el-submenu v-if="isSeeMessageCecter == true" index="2" class="active">
                <template slot="title">下载结果</template>
                <el-menu-item @click="goSelfResult" index="2-1">下载日常评价结果</el-menu-item>
                <el-menu-item
                  v-if="seeResult == true "
                  @click="goDepartenResult"
                  index="2-2"
                >下载集体评价结果</el-menu-item>
              </el-submenu>
              <el-menu-item
                v-if="isSeeMessageCecter == true "
                @click="gotoMessageList()"
                index="3"
              >消息中心</el-menu-item>
              <el-submenu v-if="isSeeMessageCecter == true " index="4">
                <template slot="title">后台管理</template>
                <el-menu-item @click="gotoAdminPerson" index="4-1">人员管理</el-menu-item>
                <el-menu-item @click="gotoAdminDepartment" index="4-2">部门管理</el-menu-item>
                <el-menu-item @click="gotoAdminTime" index="4-3">时间管理</el-menu-item>
                <el-menu-item @click="gotoAdminQuestion" index="4-4">题目管理</el-menu-item>
              </el-submenu>
            </el-menu>
          </div>
        </div>
        <div class="userState">
          <div class="iocn">
            <img src="../assets/man.png" alt="头像">
          </div>
          <a href="#">
            <span class="nowTime">
              {{nowTime}}
              <i class="dot"></i>
            </span>
            <span class="userName">{{userInfo.name}}</span>
          </a>
          <a href="javascript:void(0)" @click="logout">
            <i class="logLine"></i>
            <span class="logging">退出</span>
          </a>
        </div>
      </div>
    </div>
    <router-view/>
    <!-- 引入返回顶部组件 -->
    <v-goTop></v-goTop>
    <div class="footer">
      <!-- <p class=" siteinfo w">© 深圳职业技术学院教育技术与信息中心</p> -->
      <p class="siteinfo w">机关教辅党委服务热线 :
        <span>8080</span>
      </p>
    </div>
  </div>
</template>
<style>
.item {
  margin-top: -3px;
}
</style>

<script>
//导入api
import api from "../util/api.js";

import dialogBar from "../components/dialog.vue"; ////引入弹窗组件
import goTop from "../components/goTop.vue"; //引入返回顶部组件

export default {
  name: "layout",
  data() {
    return {
      userInfo: [],
      seeResult: false, // 判断是否是可见结果
      isSeeMessageCecter: false, //是否可查看最高权限
      sendVal: false, //打开状态
      wsData: [],
      reuseltEid: "",
      nowTime: "", //问候语
      activeIndex: '1', //导航
      hintMessage: "" //弹窗
    };
  },
  components: {
    "dialog-bar": dialogBar,
    "v-goTop": goTop
  },
  created() {
    this.login();
    this.getfilterInfo(); //权限控制
    this.newTime();
    this.initWebSocket(); ///websocket连接
    this.activeIndex = this.getContextData("activeIndex").toString() || '1'; //导航高亮 String转字符串
  },
 
  methods: {
    // 从sessionStorage存值
    setContextData: function(key, value) {
      if (typeof value == "string") {
        sessionStorage.setItem(key, value);
      } else {
        sessionStorage.setItem(key, JSON.stringify(value));
      }
    },
    // 从sessionStorage取值
    getContextData: function(key) {
      const str = sessionStorage.getItem(key);
      if (typeof str == "string") {
        try {
          return JSON.parse(str);
        } catch (e) {
          return str;
        }
      }
      return;
    },
    // 导航高亮存
    handleSelect(index, indexPath){
    // console.log("index",index, indexPath);
    this.activeIndex = index;
    this.setContextData("activeIndex",this.activeIndex) //存

    },
    //集体评价权限
    getfilterInfo() {
      this.axios('api/evaluate/filterInfo').then(response => {
        this.isEvaluated = response.data.isEvaluated;
        this.seeResult = response.data.seeResult; // 是否可以看集体结果权限
      });
    },
    // 路由跳转
    gotoAdminPerson() {
      this.$router.push("/adminPerson");
    },
    gotoAdminDepartment() {
      this.$router.push("/adminDepartment");
    },
    gotoAdminTime() {
      this.$router.push("/adminTime");
    },
     gotoAdminQuestion() {
      this.$router.push("/adminQuestion");
    },
    
    backHome() {
      this.$router.push("/page/home");
    },
    gotoMessageList() {
      this.$router.push("/personResultList"); //跳到结果列表
    },
    goDepartenResult() {
      //集体结果
      this.$router.push("/departentDownLo");
    },
    goSelfResult() {
      this.$router.push("/selfDownLo");
    },

    //-----------弹窗组件--------
    openMask() {
      this.sendVal = true;
      // 弹出10秒后关闭
      setTimeout(() => {
        this.sendVal = false;
      }, 10000);
      console.log("触发了盒子");
    },
    clickCancel() {
      console.log("点击了取消");
    },
    closeMask() {
      console.log("关闭了");
      this.sendVal = false;
    },
    clickDanger() {
      console.log("这里是danger回调");
    },
    clickConfirm() {
      console.log("点击了confirm");

      this.$router.push("/personResultList"); //跳到结果列表
      this.sendVal = false;
    },
    //websocket
    initWebSocket() {
      //初始化websocket
      // const wsurl = "wss://m.szpt.edu.cn/evaluate/socket/employee/message";
      this.websock = new WebSocket(api.message); //这里面的this都指向vue
      this.websock.onopen = this.websocketopen;
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onclose = this.websocketclose;
      this.websock.onerror = this.websocketerror;
    },
    websocketopen() {
      //打开
      console.log("WebSocket2连接成功");
    },
    websocketonmessage(e) {
      //数据接收
      // console.log("弹窗layout2", e.data);

      //数据接收
      this.wsData = e.data.split("&"); //分割字符串
      if (this.wsData[0] == 1) {
        this.hintMessage = "你有 " + this.wsData[1] + " 条新的离线消息";
      } else {
        this.hintMessage = "有一条新的评价消息";
        this.reuseltEid = this.wsData[1];
      }
      //页面加载完成延时1秒后弹出
      setTimeout(() => {
        this.openMask();
      }, 1000);
    },
    websocketclose() {
      //关闭
      console.log("WebSocket关闭");
    },
    websocketerror() {
      //失败
      console.log("WebSocket连接失败");
    },
    getItme(index) {
      this.activeClass = index; // 把当前点击元素的index，赋值给activeClass
    },
    login() {
      this.axios.get('api/evaluate/currentUser').then(response => {
        // console.log("987897",response);
        if (response.data == null || response.data == "") {
          this.$alert("系统检测到你的账号没有评价权限,请联系管理员", "提示", {
            confirmButtonText: "确定",
            type: "warning"
          }).then(() => {
            window.location.href = api.logout; //跳转退出
          });
          return;
        } else {
          this.userInfo = response.data;
          // console.log("用户信息", response.data);
          this.isSeeMessageCecter = response.data.seeResult;
          // console.log("是否可查看最高权限",this.isMessageCecter);
          var currentUserEid = response.data.eid;
          //vuex 全局管理当前登录人eid
          this.$store.state.currentUserEid = response.data.eid;
          // console.log("登录页eid",this.$store.state.currentUserEid);
        }
      });
    },
    logout() {
      window.location.href = api.logout; //登出跳转
    },

    // -----问候语时间判断------
    newTime() {
      this.nowTime = new Date().getHours();
      // console.log("time", this.nowTime);
      if (this.nowTime < 6) {
        this.nowTime = "凌晨好!";
      } else if (this.nowTime < 9) {
        this.nowTime = "早晨好!";
      } else if (this.nowTime < 12) {
        this.nowTime = "上午好!";
      } else if (this.nowTime < 14) {
        this.nowTime = "中午好!";
      } else if (this.nowTime < 17) {
        this.nowTime = "下午好!";
      } else if (this.nowTime < 19) {
        this.nowTime = "傍晚好!";
      } else if (this.nowTime < 22) {
        this.nowTime = "晚上好!";
      } else {
        this.nowTime = "夜里好!";
      }
    }
  }
};
</script>